<template>
  <div class="page-hemenu">
    <div v-for="(item,index) in menuList" :key="index" class="page-hemenu-item" @click="menuClick(item)"  :class="{'page-hemenu-menuitemative': curPath == item.path}">
      {{item.name}}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter();
const curPath = ref("")
const menuList = ref([
  {
    name: '数字分身',
    path: '/profile/myAgents',
    ative: false,
  },
  // {
  //   name: 'AI面试官',
  //   path: '/interview',
  //   ative: false,
  // },
  {
    name: '消息中心',
    path: '/notification',
    ative: false,
  },
  // {
  //   name: '我的面试',
  //   path: '/myinterview',
  //   ative: false,
  // }
])

const menuClick = (e) => {
  router.push({
    path: e.path
  })
}

watch(() => 
  router.currentRoute.value.path,
  (toPath) => {
    //要执行的方法
    curPath.value = router.currentRoute.value.fullPath;
  },{immediate: true,deep: true})

</script>

<style lang="scss" scoped>
.page-hemenu{
  position: fixed;
  top:45px;
  left:0;
  right:0;
  bottom:0;
  background: #f4f2ee;
  z-index: 10000;
  padding:16px;
  &-menuitemative{
    font-weight: bold;
    color: #0057ff!important;
    border: #ddd 1px solid;
    border-radius: 12px;
    background: rgba(0,87,255,0.06);
  }
  &-item{
    height:44px;
    line-height: 44px;
    color: #2c2c2c;
    font-size: 14px; 
    padding: 0 12px;
  }
}
</style>